<template>
  <div style="margin-top:70px;padding:0 50px">
    <el-table :data="tableData"
              border
              style="width: 100%">
      <el-table-column fixed
                       align="center"
                       prop="title"
                       label="标题">
      </el-table-column>
      <el-table-column prop="summary"
                       align="center"
                       show-overflow-tooltip
                       label="概述">
      </el-table-column>
      <el-table-column prop="commentsCount"
                       align="center"
                       label="评论">
      </el-table-column>
      <el-table-column prop="viewsCount"
                       align="center"
                       label="查看">
      </el-table-column>
      <!-- <el-table-column prop="content"
                       align="center"
                       show-overflow-tooltip
                       label="正文">
      </el-table-column> -->
      <el-table-column align="center"
                       label="是否焦点">
        <template slot-scope="scope">
          <span>{{scope.row.focus?'是':'否'}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="是否热门">
        <template slot-scope="scope">
          <span>{{scope.row.isHot?'是':'否'}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="是否置顶">
        <template slot-scope="scope">
          <span>{{scope.row.isTop?'是':'否'}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="是否推荐">
        <template slot-scope="scope">
          <span>{{scope.row.recommend?'是':'否'}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="banner"
                       show-overflow-tooltip
                       label="焦点图">
      </el-table-column>
      <el-table-column align="center"
                       prop="img"
                       show-overflow-tooltip
                       label="图片">
      </el-table-column>
      <el-table-column align="center"
                       prop="pubTime"
                       width="120"
                       label="发布时间">
      </el-table-column>
      <el-table-column align="center"
                       fixed="right"
                       width="150"
                       label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)"
                     type="text"
                     size="small">查看</el-button>
          <el-button type="text"
                     size="small">编辑</el-button>
          <el-button type="text"
                     size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { fetchListall } from '../../api'
export default {
  data () {
    return {
      tableData: [],
      currPage: 1
    }
  },
  mounted () {
    this.fetchListall()
  },
  methods: {
    fetchListall () {
      var params = {
        page: this.currPage,
        size: 20
      }
      fetchListall(params).then(res => {
        this.tableData = res.data || []
      }).catch(err => {
        console.log(err)
      })
    },
    handleClick (row) {
      console.log(row);
    }
  },
}
</script>